<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>宝宝出生天数</title>
    <meta name = "discription" content="计算宝宝出生天数" />
    <meta charset="UTF-8" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="icon" sizes="any" mask href="./static/icon.jpeg">
    <style>
    body {
      font-size: 24px;

    }
    @keyframes fade-in {  
      0% {opacity: 0;}/*初始状态 透明度为0*/  
      40% {opacity: 0.5;}/*过渡状态 透明度为0*/  
      100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
    @-webkit-keyframes fade-in {/*针对webkit内核*/  
      0% {opacity: 0;}  
      40% {opacity: 0.5;}  
      100% {opacity: 1;}  
}  
    #app {
      position:absolute;
      top:50%;
      left:50%;
      width:27em;
      height: 26em;
      margin-top: -14em;
      margin-left: -13.5em;
      border-radius: 1em;
      text-align:center;
      color:rgb(197, 236, 252);
      background:/*#71acb9;*/-webkit-linear-gradient(bottom, #65abbb, #7dbecc); 
      box-shadow: 5px 5px 50px #388a9cb8;
      animation: fade-in;/*动画名称*/  
      animation-duration: 1.5s;/*动画持续时间*/  
      -webkit-animation:fade-in 1.5s;/*针对webkit内核*/
    }
    p {
      font-size:3em;
      font-weight: bolder;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      text-align: center;
    }

    span {
      background-image:-webkit-linear-gradient(bottom, rgb(251, 255, 0) ,#ffc400,rgb(255, 5, 5)); 
      padding: 0 .3em;
      -webkit-background-clip: text; 
      -webkit-text-fill-color: transparent; 
      font-size: 1.5em;
      text-shadow: 5px 5px 1px #ffc400;
      font-style: italic;
    }
    </style>
  </head>
  <body>
 
    <div id = "app">
  
      <p>大宝二宝,你们已经</p>
      <p><span>{{ days }}</span> 天</p>
      <p><span>{{ hours }}</span> 小时了</p>

    </div>
<script>
function getHours(){
    d1 = new Date('February 1, 2020, 12:22:00 GMT+08:00')
    d2 = new Date()
    min_h = (d2.getTime() - d1.getTime())/3600000
//    days = parseInt(min_h/24)
//    hours = min_h % 24
    return min_h
}

new Vue({
  el: '#app',
  data: {
    days: parseInt(getHours()/24),
    hours: parseInt(getHours()%24)
  }
})
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>　　

  </body>
</html>
